<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple bg-1">
          <div>
            <img src="@/assets/img/图层18@3x.png" alt="" />
            <div class="wb">68人<br />本周新增用户</div>
          </div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple bg-2">
          <img src="@/assets/img/图层19@3x.png" alt="" />
          <div class="wb">106单<br />本周成交订单</div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple bg-3">
          <img src="@/assets/img/图层20@3x.png" alt="" />
          <div class="wb">104678<br />本周成交金额</div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple bg-4">
          <img src="@/assets/img/图层20@3x.png" alt="" />
          <div class="wb">96节<br />本周排课数量</div>
        </div></el-col
      >
    </el-row>
    <div class="container">
      <div class="left">
        <div class="left-top">
          <span>新增学员</span>
          <span>查看更多</span>
        </div>
        <div class="left-bottom">
          <ul>
            <li v-for="(item, index) in tableData" :key="index">
              <div class="blue-top">
                <div class="circle"></div>
              </div>
              <p>姓名:{{ item.name }}</p>
              <p>电话:{{ item.phone }}</p>
              <p>科目:{{ item.goodsClass }}</p>
              <p>班级:{{ item.goodsId }}</p>
              <p>时间:2021年{{ item.yue }}月{{ item.ri }}日</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <div class="rt-top" id="main">
          <div class="left-top">
            <span>新增学员</span>
            <span>查看更多</span>
          </div>
          <hr />
        </div>
        <div class="rt-bottom">
          <p>跟进记录</p>
          <el-table :data="tableData" stripe style="width: 100%" height="170px">
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="phone" label="联系电话" />
            <el-table-column prop="type" label="跟进方式" />
            <el-table-column prop="address" label="跟进状态" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted } from "vue";
import * as echarts from "echarts";
import { mockapi } from "../../../api/mystudents/mock";
export default {
  data() {
    return {
      tableData: "",
    };
  },
  created() {
    this.getstudentapi();
  },
  methods: {
    async getstudentapi() {
      const res = await mockapi.getstudent();
      this.tableData = res.result.data;
      console.log(res);
    },
  },
  setup() {
    onMounted(() => {
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      window.onresize = function () {
        myChart.resize();
      };
      myChart.setOption({
        // title: {
        //   text: "Gradient Stacked Area Chart",
        // },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "3%",
          top: "15px",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [101, 232, 101, 400, 90, 200, 190],
          },
        ],
      });
    });
  },
};
</script>
<style lang="less" scoped>
// .bg-purple {
//   background: #d3dce6;
// }
.grid-content {
  border-radius: 4px;
  height: 200px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.bg-1 {
  background: url("../../../assets/img/蓝色学员信息.png") no-repeat;
  position: relative;
  background-size: 100% 100%;
}
.wb {
  color: white;
  position: absolute;
  left: 160px;
  top: 95px;
}
.bg-2 {
  background: url("../../../assets/img/绿色学员信息.png") no-repeat 100%;
  position: relative;
  background-size: 100% 100%;
}
.bg-3 {
  background: url("../../../assets/img/橙色学员信息.png") no-repeat 100%;
  position: relative;
  background-size: 100% 100%;
}
.bg-4 {
  background: url("../../../assets/img/粉色学员信息.png") no-repeat 100%;
  position: relative;
  background-size: 100% 100%;
}
img {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 55px;
  top: 60px;
}
.bm-left {
  border-radius: 4px;
  height: 752px;
}
.container {
  display: flex;
  justify-content: space-between;
}
.left {
  background: white;
  height: 419px;
  // width: 650px;
  width: 49%;
  border-radius: 4px;
  .left-top {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  span:nth-child(2) {
    color: blue;
  }
  .left-bottom {
    display: flex;
    margin: auto;

    ul {
      display: flex;
      -webkit-line-clamp: 2;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      li {
        width: 29%;
        height: 180px;
        background: white;
        margin: 5px 5px;
        box-shadow: 2px 2px 10px #909090;
        .blue-top {
          width: 100%;
          height: 70px;
          background: #446ce3;
          display: flex;
          justify-content: center;
          align-items: center;
          .circle {
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
          }
        }
        p {
          margin-left: 20px;
          margin-top: 5px;
        }
      }
    }
  }
}
.right {
  height: 419px;
  // width: 650px;
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .rt-top {
    background: white;
    // width: 650px;
    width: 100%;
    border-radius: 4px;
    height: 200px;
    .left-top {
      display: flex;
      justify-content: space-between;
      padding: 10px;
    }
    span:nth-child(2) {
      color: blue;
    }
  }
  .rt-bottom {
    background: #d3dce6;
    // width: 650px;
    width: 100%;

    border-radius: 4px;
    height: 200px;
    p {
      padding: 10px;
    }
  }
}
</style>
